<template>
  <div class="app-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-page-header @back="goBack" content="任务安排详情 - 待执行" />
      </div>
      <div class="header-actions">
        <el-button type="primary" size="medium" @click="handleExecute">
          <i class="el-icon-check"></i>执行
        </el-button>
        <el-button type="warning" size="medium" @click="handleReschedule">
          <i class="el-icon-time"></i>改期
        </el-button>
        <el-button type="danger" size="medium" @click="handleCancel">
          <i class="el-icon-close"></i>取消
        </el-button>
        <el-button size="medium" @click="goBack">
          <i class="el-icon-back"></i>返回
        </el-button>
      </div>
    </div>

    <!-- 基本信息卡片 -->
    <el-card class="info-card basic-info-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span class="card-title">
            <i class="el-icon-user-solid card-icon"></i>基本信息
          </span>
        </div>
      </template>
      <div class="basic-info-content">
        <!-- 头像区域 -->
        <div class="avatar-section">
          <div class="avatar-container">
            <img 
              :src="getAvatarUrl(detailData.photo || detailData.elderly_photo)" 
              :alt="detailData.elderly_name || '老人头像'" 
              class="elderly-avatar"
              @error="handleImageError"
            />
          </div>
          <div class="elderly-info">
            <div class="elderly-name">{{ detailData.elderly_name || '未知' }}</div>
            <div class="elderly-tags">
              <el-tag size="small" :type="detailData.gender === '男' ? 'primary' : 'danger'">
                {{ detailData.gender || '未知' }}
              </el-tag>
              <el-tag size="small" type="info">{{ detailData.age || '未知' }}岁</el-tag>
            </div>
          </div>
        </div>
        
        <!-- 信息列表 -->
        <div class="info-grid">
          <div class="info-item">
            <label class="info-label">床位号：</label>
            <span class="info-value">{{ detailData.bed_no || '未分配' }}</span>
          </div>
          <div class="info-item" v-if="detailData.project_type !== '护理计划外'">
            <label class="info-label">护理等级：</label>
            <span class="info-value level-badge">{{ detailData.nursing_level_name || '未知' }}</span>
          </div>
          <div class="info-item">
            <label class="info-label">联系电话：</label>
            <span class="info-value phone">{{ detailData.phone || detailData.contact || '未填写' }}</span>
          </div>
          <div class="info-item">
            <label class="info-label">入住时间：</label>
            <span class="info-value">{{ parseTime(detailData.check_in_time) || '未填写' }}</span>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 护理项目信息卡片 -->
    <el-card class="info-card project-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span class="card-title">
            <i class="el-icon-document card-icon"></i>护理项目
          </span>
        </div>
      </template>
      <div class="project-content">
        <!-- 项目标题区域 -->
        <div class="project-header">
          <div class="project-main">
            <h3 class="project-name">{{ detailData.nursing_item_name || '未设置' }}</h3>
            <div class="project-meta">
              <span class="creator">创建人：{{ detailData.creator_name || '未知' }}</span>
              <span class="order-no">关联单据：{{ detailData.order_no || '无' }}</span>
            </div>
          </div>
          <div class="project-status">
            <el-tag :type="getProjectTypeStyle(detailData.project_type)" size="medium" effect="dark">
              {{ detailData.project_type || '未设置' }}
            </el-tag>
            <el-tag type="warning" size="medium" effect="light">
              {{ detailData.status || '待执行' }}
            </el-tag>
          </div>
        </div>

        <!-- 详细信息区域 -->
        <div class="project-details">
          <div class="detail-section">
            <h4 class="section-title">服务信息</h4>
            <div class="detail-grid">
              <div class="detail-item">
                <label class="detail-label">期望服务时间：</label>
                <span class="detail-value time-highlight">{{ parseTime(detailData.expected_service_time) || '未设置' }}</span>
              </div>
              <div class="detail-item">
                <label class="detail-label">创建时间：</label>
                <span class="detail-value">{{ parseTime(detailData.create_time) || '未设置' }}</span>
              </div>
              <div class="detail-item">
                <label class="detail-label">护理员：</label>
                <span class="detail-value">{{ detailData.executor_name || '未分配' }}</span>
              </div>
              <div class="detail-item">
                <label class="detail-label">项目类型：</label>
                <span class="detail-value">{{ detailData.project_type || '未知' }}</span>
              </div>
            </div>
          </div>

          <div class="detail-section">
            <h4 class="section-title">备注信息</h4>
            <div class="remark-content">
              <p>{{ detailData.order_remark || detailData.remark || detailData.note || detailData.memo || '无备注信息' }}</p>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 加载状态 -->
    <el-skeleton v-if="loading" :rows="6" animated />
    
    <!-- 执行记录弹窗 -->
    <el-dialog
      v-model="executeDialogOpen"
      title="新增执行记录"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form :model="executeForm" ref="executeFormRef" label-width="100px">
        <el-form-item label="*执行时间" required>
          <el-date-picker
            v-model="executeForm.executionTime"
            type="datetime"
            placeholder="选择执行时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          />
        </el-form-item>
        
        <el-form-item label="*执行图片" required>
          <div class="image-upload-container">
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              :headers="uploadHeaders"
              :on-success="handleImageSuccess"
              :on-error="handleUploadError"
              :before-upload="beforeImageUpload"
              :show-file-list="false"
              accept="image/png,image/jpg,image/jpeg"
            >
              <div class="upload-area" v-if="!executeForm.executionImage">
                <el-icon class="upload-icon"><Plus /></el-icon>
                <div class="upload-text">点击上传图片</div>
                <div class="upload-tip">图片大小不超过2M</div>
                <div class="upload-tip">仅支持上传PNG JPG JPEG类型图片</div>
              </div>
            </el-upload>
            
            <!-- 图片预览区域 -->
            <div v-if="executeForm.executionImage" class="image-preview">
              <img 
                :src="imagePreviewUrl" 
                alt="执行图片预览"
                class="preview-image"
                @load="handleImageLoad"
                @error="handleImageLoadError"
              />
              <div class="image-actions">
                <el-button type="primary" size="small" @click="reuploadImage">重新上传</el-button>
                <el-button type="danger" size="small" @click="removeImage">删除</el-button>
              </div>
            </div>
          </div>
        </el-form-item>
        
        <el-form-item label="*执行记录" required>
          <el-input
            v-model="executeForm.executionRecord"
            type="textarea"
            :rows="4"
            placeholder="请输入执行记录"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="executeDialogOpen = false">取消</el-button>
          <el-button type="primary" @click="submitExecute">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 改期对话框 -->
    <el-dialog
      v-model="rescheduleDialogOpen"
      title="改期任务"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form :model="rescheduleForm" ref="rescheduleFormRef" label-width="120px">
        <el-form-item label="*新的服务时间" required>
          <el-date-picker
            v-model="rescheduleForm.newServiceTime"
            type="datetime"
            placeholder="请选择新的服务时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="rescheduleDialogOpen = false">取消</el-button>
          <el-button type="primary" @click="submitReschedule">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="ArrangementDetailPending">
import { ref, onMounted, getCurrentInstance, watch, nextTick } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { getArrangementDetail, updateArrangement, executeArrangement, rescheduleArrangement } from "@/api/system/arrangement"
import { parseTime as ruoyiParseTime } from "@/utils/ruoyi"
import { useRoute, useRouter } from 'vue-router'
import useUserStore from '@/store/modules/user'

const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const detailData = ref({})
const loading = ref(false)

// 执行记录相关
const executeDialogOpen = ref(false)
const executeForm = ref({
  taskId: null,
  executionTime: null,
  executionImage: null,
  executionRecord: ''
})
const imagePreviewUrl = ref('')

// 改期对话框相关
const rescheduleDialogOpen = ref(false)
const rescheduleForm = ref({
  taskId: null,
  newServiceTime: null
})

/** 获取任务详情 */
function getDetail() {
  loading.value = true
  const id = route.query.id
  if (!id) {
    proxy.$modal.msgError("缺少任务ID")
    loading.value = false
    return
  }
  
  console.log('开始获取待执行任务详情，ID:', id)
  
  getArrangementDetail(id).then(response => {
    console.log('详情API响应:', response)
    if (response.code === 200) {
      const data = response.data
      console.log('响应数据类型:', typeof data, '是否为数组:', Array.isArray(data))
      console.log('响应数据内容:', data)
      
      // 后端已去除 @MapKey("id")，现在直接返回 Map<String, Object>
      // data 就是一个普通的对象，直接赋值即可
      detailData.value = data || {}
      
      console.log('最终的详情数据:', detailData.value)
      console.log('护理员信息 executor_name:', detailData.value.executor_name)
      console.log('执行人ID executor:', detailData.value.executor)
    } else {
      proxy.$modal.msgError(response.msg || "获取详情失败")
      console.error('API返回错误:', response)
    }
    loading.value = false
  }).catch(error => {
    console.error('获取任务详情失败:', error)
    loading.value = false
    proxy.$modal.msgError("获取详情失败: " + (error.message || '未知错误'))
  })
}

/** 返回上一页 */
function goBack() {
  router.go(-1)
}

/** 执行任务 */
function handleExecute() {
  // 打开执行记录弹窗
  executeDialogOpen.value = true
  executeForm.value = {
    taskId: detailData.value.id,
    executionTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
    executionImage: null,
    executionRecord: ''
  }
}

/** 改期 */
function handleReschedule() {
  // 重置表单并设置默认值
  rescheduleForm.value = {
    taskId: detailData.value.id,
    newServiceTime: detailData.value.expected_service_time || null
  }
  rescheduleDialogOpen.value = true
  
  // 下次DOM更新后重置表单验证
  nextTick(() => {
    proxy.$refs.rescheduleFormRef?.clearValidate()
  })
}

/** 提交改期 */
function submitReschedule() {
  if (!rescheduleForm.value.newServiceTime) {
    proxy.$modal.msgError("请选择新的服务时间")
    return
  }
  
  const rescheduleData = {
    id: rescheduleForm.value.taskId,
    expectedServiceTime: rescheduleForm.value.newServiceTime,
    rescheduleTime: new Date()
  }
  
  rescheduleArrangement(rescheduleData).then(response => {
    if (response.code === 200) {
      proxy.$modal.msgSuccess("改期成功")
      rescheduleDialogOpen.value = false
      getDetail()
    } else {
      proxy.$modal.msgError(response.msg || "改期失败")
    }
  }).catch(error => {
    console.error('改期失败:', error)
    proxy.$modal.msgError("改期失败")
  })
}

/** 取消任务 */
function handleCancel() {
  proxy.$modal.prompt('请输入取消原因', '取消任务', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /.+/,
    inputErrorMessage: '取消原因不能为空'
  }).then(({ value }) => {
    const cancelData = {
      id: detailData.value.id,
      status: '已取消',
      cancel_reason: value,
      cancel_time: new Date().toISOString().replace('T', ' ').substring(0, 19),
      cancel_person: userStore.id || 'system'
    }
    
    updateArrangement(cancelData).then(response => {
      if (response.code === 200) {
        proxy.$modal.msgSuccess("取消成功")
        router.push('/system/arrangement-detail-cancelled?id=' + detailData.value.id)
      } else {
        proxy.$modal.msgError(response.msg || "取消失败")
      }
    }).catch(error => {
      console.error('取消任务失败:', error)
      proxy.$modal.msgError("取消失败")
    })
  }).catch(() => {})
}

/** 根据项目类型获取标签样式 */
function getProjectTypeStyle(projectType) {
  const typeMap = {
    '日常护理': 'success',
    '医疗护理': 'danger',
    '康复护理': 'warning',
    '心理护理': 'info'
  }
  return typeMap[projectType] || 'info'
}

/** 时间格式化函数 */
function parseTime(time, format = '{y}-{m}-{d} {h}:{i}:{s}') {
  if (!time) return ''
  return ruoyiParseTime(time, format)
}

/** 获取头像URL */
function getAvatarUrl(photoName) {
  if (!photoName) return '/src/assets/images/profile.jpg'
  if (/^https?:\/\//i.test(photoName)) return photoName
  if (/^[a-zA-Z]:\\\\/.test(photoName) || photoName.includes('\\')) {
    return photoName
  }
  if (photoName.startsWith('/')) return photoName
  return `/static/uploads/${photoName}`
}

/** 头像加载失败处理 */
function handleImageError(event) {
  event.target.src = '/src/assets/images/profile.jpg'
}

// 执行记录相关函数
const uploadUrl = ref('/dev-api/system/arrangement/upload')
const uploadHeaders = ref({
  'Authorization': 'Bearer ' + (localStorage.getItem('token') || '')
})

/** 图片上传前验证 */
function beforeImageUpload(file) {
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isImage) {
    proxy.$modal.msgError('只能上传图片文件!')
    return false
  }
  if (!isLt2M) {
    proxy.$modal.msgError('图片大小不能超过 2MB!')
    return false
  }
  return true
}

/** 图片上传成功回调 */
function handleImageSuccess(response) {
  console.log('上传响应:', response)
  if (response.code === 200) {
    // 后端返回的数据结构：{ url: '/static/uploads/xxx.png', fileName: 'xxx.png' }
    let imageUrl = response.data?.url || response.url || response.data
    const fileName = response.data?.fileName || response.fileName
    console.log('从响应中提取的图片URL:', imageUrl)
    console.log('从响应中提取的文件名:', fileName)

    // 规范化为可访问的完整URL（前端运行在80端口，静态资源在8080端口）
    if (imageUrl && !imageUrl.startsWith('http')) {
      if (imageUrl.startsWith('/uploads/')) {
        imageUrl = `http://localhost:8080${imageUrl}`
      } else if (imageUrl.startsWith('/static/')) {
        imageUrl = `http://localhost:8080${imageUrl}`
      } else if (!imageUrl.startsWith('/')) {
        imageUrl = `http://localhost:8080/uploads/${imageUrl}`
      } else {
        imageUrl = `http://localhost:8080${imageUrl}`
      }
    }

    console.log('设置前的executeForm.executionImage:', executeForm.value.executionImage)
    executeForm.value.executionImage = imageUrl
    executeForm.value.imageFileName = fileName
    console.log('设置后的executeForm.executionImage:', executeForm.value.executionImage)
    console.log('完整的executeForm:', executeForm.value)
    proxy.$modal.msgSuccess('图片上传成功')
    
    // 直接使用图片URL进行预览
    imagePreviewUrl.value = imageUrl
    console.log('设置图片预览URL:', imageUrl)
  } else {
    proxy.$modal.msgError('图片上传失败: ' + (response.msg || '未知错误'))
  }
}

/** 图片上传失败回调 */
function handleUploadError(error) {
  console.error('图片上传失败:', error)
  proxy.$modal.msgError('图片上传失败')
}

/** 获取完整图片URL */
function getFullImageUrl(imageUrl) {
  console.log('getFullImageUrl 输入:', imageUrl)
  if (!imageUrl) {
    console.log('图片URL为空，返回空字符串')
    return ''
  }
  if (imageUrl.startsWith('http')) {
    console.log('图片URL已经是完整URL:', imageUrl)
    return imageUrl
  }
  
  // 修复：对于/static/开头的URL，使用专门的图片获取接口返回Base64数据
  if (imageUrl.startsWith('/static/')) {
    const filename = imageUrl.replace('/static/uploads/', '')
    console.log('需要获取Base64图片数据:', filename)
    // 这里需要异步获取Base64数据，暂时返回原URL
    return imageUrl
  }
  
  // 其他情况使用当前域名
  const fullUrl = window.location.origin + imageUrl
  console.log('构建完整URL:', fullUrl)
  return fullUrl
}

/** 重新上传图片 */
function reuploadImage() {
  executeForm.value.executionImage = null
  imagePreviewUrl.value = ''
  console.log('重置图片上传状态')
}

/** 删除图片 */
function removeImage() {
  executeForm.value.executionImage = null
  imagePreviewUrl.value = ''
  console.log('删除图片')
}

/** 图片加载成功 */
function handleImageLoad() {
  console.log('图片加载成功')
}

/** 图片加载失败 */
function handleImageLoadError(event) {
  console.error('图片加载失败:', event)
  // 尝试一次后端直连接口作为兜底
  if (executeForm.value?.imageFileName) {
    const fallbackUrl = `http://localhost:8080/system/arrangement/image/${executeForm.value.imageFileName}`
    console.log('尝试备用URL:', fallbackUrl)
    imagePreviewUrl.value = fallbackUrl
    executeForm.value.executionImage = fallbackUrl
  } else {
    proxy.$modal.msgError('图片加载失败')
  }
}

/** 获取Base64图片数据 */
async function loadImageAsBase64(imageUrl) {
  try {
    if (!imageUrl || !imageUrl.startsWith('/static/')) {
      return imageUrl
    }
    
    const filename = imageUrl.replace('/static/uploads/', '')
    console.log('获取Base64图片数据:', filename)
    
    const response = await fetch(`/system/arrangement/image/${filename}`)
    const result = await response.json()
    
    if (result.code === 200 && result.data && result.data.data) {
      console.log('成功获取Base64图片数据')
      return result.data.data
    } else {
      console.error('获取Base64图片数据失败:', result.msg)
      return imageUrl
    }
  } catch (error) {
    console.error('获取Base64图片数据异常:', error)
    return imageUrl
  }
}

/** 提交执行记录 */
function submitExecute() {
  if (!executeForm.value.executionTime) {
    proxy.$modal.msgError('请选择执行时间')
    return
  }
  if (!executeForm.value.executionImage) {
    proxy.$modal.msgError('请上传执行图片')
    return
  }
  if (!executeForm.value.executionRecord) {
    proxy.$modal.msgError('请输入执行记录')
    return
  }

  const executeData = {
    id: executeForm.value.taskId,
    status: '已执行',
    executor: userStore.id,  // 添加当前登录用户ID作为执行人
    executionTime: executeForm.value.executionTime,
    executionImage: executeForm.value.executionImage,
    executionRecord: executeForm.value.executionRecord
  }

  executeArrangement(executeData).then(() => {
    proxy.$modal.msgSuccess("执行成功")
    executeDialogOpen.value = false
    // 执行成功后跳转到已执行详情页面
    setTimeout(() => {
      router.push({
        path: '/service/arrangement-detail-executed',
        query: { id: executeForm.value.taskId }
      })
    }, 1000)
  }).catch(error => {
    console.error('执行任务失败:', error)
    proxy.$modal.msgError('执行失败: ' + (error.message || '未知错误'))
  })
}

// 监控executeForm.executionImage的变化
watch(() => executeForm.value.executionImage, (newVal, oldVal) => {
  console.log('executeForm.executionImage 变化:', {
    oldValue: oldVal,
    newValue: newVal,
    timestamp: new Date().toISOString()
  })
  
  if (newVal) {
    imagePreviewUrl.value = newVal
    console.log('设置图片预览URL:', newVal)
  } else {
    imagePreviewUrl.value = ''
  }
}, { deep: true })

onMounted(() => {
  getDetail()
})
</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: calc(100vh - 50px);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  
  .header-left {
    flex: 1;
  }
  
  .header-actions {
    display: flex;
    gap: 12px;
    
    .el-button {
      border-radius: 8px;
      padding: 10px 20px;
      font-weight: 500;
      
      i {
        margin-right: 6px;
      }
    }
  }
}

.info-card {
  margin-bottom: 24px;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  
  &:hover {
    transform: translateY(-2px);
    transition: all 0.3s ease;
  }
}

.card-header {
  padding: 16px 24px;
  background: linear-gradient(90deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #e8e8e8;
  
  .card-title {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    align-items: center;
    
    .card-icon {
      margin-right: 8px;
      color: #409eff;
    }
  }
}

/* 基本信息卡片样式 */
.basic-info-card {
  .basic-info-content {
    display: flex;
    padding: 24px;
    gap: 40px;
    align-items: flex-start;
  }
  
  .avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 160px;
    
    .avatar-container {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      border: 4px solid #e6f7ff;
      margin-bottom: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      
      .elderly-avatar {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    
    .elderly-info {
      text-align: center;
      
      .elderly-name {
        font-size: 20px;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 8px;
      }
      
      .elderly-tags {
        display: flex;
        gap: 8px;
        justify-content: center;
      }
    }
  }
  
  .info-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    
    .info-item {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      background: #f8f9fa;
      border-radius: 8px;
      border-left: 4px solid #409eff;
      
      .info-label {
        width: 80px;
        color: #666;
        font-weight: 500;
        margin-right: 12px;
      }
      
      .info-value {
        color: #2c3e50;
        font-size: 14px;
        font-weight: 500;
        
        &.level-badge {
          background: #409eff;
          color: white;
          padding: 4px 12px;
          border-radius: 12px;
          font-size: 12px;
        }
        
        &.phone {
          color: #1890ff;
          font-weight: 600;
        }
      }
    }
  }
}

/* 护理项目卡片样式 */
.project-card {
  border-left: 6px solid #409eff;
  
  .project-content {
    padding: 0;
  }
  
  .project-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
    border-bottom: 1px solid #e8f4ff;
    
    .project-main {
      flex: 1;
      
      .project-name {
        font-size: 22px;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 12px;
      }
      
      .project-meta {
        display: flex;
        gap: 30px;
        color: #666;
        font-size: 14px;
        
        .creator, .order-no {
          padding: 6px 12px;
          background: white;
          border-radius: 6px;
          border: 1px solid #e8e8e8;
        }
      }
    }
    
    .project-status {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: flex-end;
    }
  }
  
  .project-details {
    padding: 24px;
    
    .detail-section {
      margin-bottom: 24px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 2px solid #f0f0f0;
      }
      
      .detail-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        
        .detail-item {
          display: flex;
          flex-direction: column;
          padding: 16px;
          background: #f8f9fa;
          border-radius: 8px;
          border-left: 4px solid #67c23a;
          
          .detail-label {
            color: #666;
            font-size: 12px;
            margin-bottom: 6px;
            font-weight: 500;
          }
          
          .detail-value {
            color: #2c3e50;
            font-size: 14px;
            font-weight: 600;
            
            &.time-highlight {
              color: #e6a23c;
              font-size: 15px;
              font-weight: 700;
            }
          }
        }
      }
      
      .remark-content {
        padding: 16px;
        background: #f8f9fa;
        border-radius: 8px;
        border-left: 4px solid #909399;
        
        p {
          margin: 0;
          color: #666;
          line-height: 1.6;
          font-size: 14px;
        }
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-container {
    padding: 12px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    
    .header-actions {
      flex-wrap: wrap;
      justify-content: center;
    }
  }
  
  .basic-info-content {
    flex-direction: column;
    gap: 24px !important;
  }
  
  .info-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .project-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    
    .project-status {
      align-items: center !important;
      flex-direction: row !important;
      justify-content: center;
    }
  }
  
  .detail-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .project-meta {
    flex-direction: column;
    gap: 8px !important;
  }
}

// 执行记录弹窗样式
.image-upload-container {
  width: 100%;
  
  .upload-area {
    border: 2px dashed #d9d9d9;
    border-radius: 6px;
    width: 100%;
    height: 180px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: border-color 0.3s;
    
    &:hover {
      border-color: #409eff;
    }
    
    .upload-icon {
      font-size: 28px;
      color: #8c939d;
      margin-bottom: 16px;
    }
    
    .upload-text {
      color: #606266;
      font-size: 14px;
      margin-bottom: 8px;
    }
    
    .upload-tip {
      color: #909399;
      font-size: 12px;
      margin-bottom: 4px;
    }
  }
  
  .image-preview {
    position: relative;
    width: 100%;
    text-align: center;
    
    .preview-image {
      max-width: 100%;
      max-height: 200px;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      margin-bottom: 10px;
    }
    
    .image-actions {
      display: flex;
      justify-content: center;
      gap: 10px;
      
      .el-button {
        margin: 0;
      }
    }
  }
}
</style>